<script setup lang="ts">

import type {OrderPO} from "~/pojo/po/OrderPO";

let route=useRoute()
let date=new Date(route.query.time as string);
let tripId=route.query.id as string;

const followList:Ref<OrderPO[]>=ref([])

let config=useRuntimeConfig()
function replaceURL(url:string):string{
  if(url===config.public.defaultUserAvatarURL)return url
  return config.public.enableReplaceImgURL?url.replace(config.public.oldImgHost,config.public.newImgHost):url
}
onMounted(function (){
  cFetch<OrderPO>(`/order/api/fellows`,{
    auth:true,
    defaultOpts:{
      method: 'POST',
      body:{
        driverStrokeId:tripId
      }
    }
  }).then(res=>{
    followList.value=res.data
  })
})

function arrived(){
  cFetch(`/stroke/api/delivery/${tripId}`,{
    auth:true,
    defaultOpts:{
      method: 'POST',
    }
  }).then(res=>{
    showToast('行程已结束，账单已生成')
    bottomBarStore().index=2
    navigateTo('/bills')
  })
}
</script>

<template>
  <div class="main">
    <div class="info">
      <h2 style="color: green;text-align: center;margin: 11px 0;">已发车</h2>
      <p>出发地：{{route.query.from}}</p>
      <p>目的地：{{route.query.to}}</p>
      <p>出发时间：{{date.getFullYear()}}年{{date.getMonth()+1}}月{{date.getDate()}}日 {{date.getHours().toString().padStart(2,'0')}}:{{date.getMinutes().toString().padStart(2,'0')}}</p>
      <div>
        <van-button size="large" @click="arrived">确认送达</van-button>
      </div>
    </div>

    <div class="driver-info">
      <h2 style="text-align: center;margin: 13px 0;">同行乘客</h2>
      <div class="passengers">
        <div class="info-detail" v-for="pas in followList">
          <div class="driver-avatar">
            <van-image
                round
                width="3.7rem"
                height="3.7rem"
                fit="cover"
                :src="replaceURL(pas.passengerAvatar?pas.passengerAvatar:config.public.defaultUserAvatarURL)"
            />
          </div>
          <div class="info-content">
            <h3 style="margin: 6px 0">{{ pas.passengerUseralias }}</h3>
            <span>联系电话：<span class="font-c">{{ pas.passengerPhone }}</span></span>
            <span>起始位置：<span class="font-c">{{ pas.passengerStartAddr }}</span></span>
            <span>终点位置：<span class="font-c">{{ pas.passengerEndAddr }}</span></span>
            <span>乘车状态：
              <span class="font-c" v-if="pas.passengerStrokeStatus===1">已确认同行</span>
              <span class="font-c" v-if="pas.passengerStrokeStatus===2">已上车</span>
              <span class="font-c" v-if="pas.passengerStrokeStatus===3">已下车</span>
            </span>
          </div>
        </div>

      </div>

    </div>
  </div>
</template>

<style scoped>
.main{
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info{
  border-radius: 12px;
  background-color: RGB(227,231,228);
  padding: 14px;
  border: 1px solid gray;
  width: 80%;
  margin: 20px auto;
}
.driver-info{
  width: 80%;
  margin: 20px auto;
  background-color: RGB(227,231,228);
  border-radius: 14px;
  padding: 14px;
  border: 1px dotted gray;
}
.info-detail{
  display: flex;
  flex-direction: row;
  background-color: whitesmoke;
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 10px 0 10px;
}
.info-detail:last-child{
  margin-bottom: 0;
}
.driver-avatar{
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.info-content{
  display: flex;
  flex: 3.5;
  flex-direction: column;
}
.font-c{
  color: RGB(184,134,11);
}
.passengers{
  display: flex;
  flex-direction: column;
}
</style>